Class 2 Agenda:

Class 2 Demonstration Labs:

Lecture Demo 1: Orient to CARTO; setup for CartoCSS

VIIRS Fire Points

Default Style prior to CartoCSS styling

CartoCSS applied to #layer for VIIRS Fire Points

Lecture Demo 2 - CartoCSS Zoom Conditions


[zoom >= 10] {
  marker-width: 40;
  }
  

Zoom Condition #1 Applied When the zoom level is 12 or more, make the markers 15 pixels wide.


[zoom >= 12] {
  marker-fill: green;
  }
  

Zoom Condition #2 Applied

Note: CartoCSS is ‘order dependent’ meaning the order of the conditions is respected, i.e. what comes first is enacted first, what comes second, is enacted second, and so forth.

Lecture Demo 3 - CartoCSS Attribute Conditions

 [bright_ti4 >= 350]{
  marker-width: 10;
  marker-fill: red;
  marker-fill-opacity: 1.0;
  }
  

Attribute-based Conditions Applied

Lecture Demo 4 - CartoCSS ramps

marker-fill: ramp([bright_ti4], cartocolor(Temps), jenks);

To accent the color ramp, the following complete #layer CartoCSS can be used:


#layer {
  marker-width: 10;
  marker-fill: ramp([bright_ti4], cartocolor(Temps), jenks);
  marker-fill-opacity: 0.9;
  marker-allow-overlap: true;
  marker-line-width: .5;
  marker-line-color: black;
  marker-line-opacity: 1;
}

Color Ramp Applied